<template>
	<view v-if="banner.data">
		<swiper 
			class="swiper" 
			circular 
			:indicator-dots="true" 
			:autoplay="true" 
			:interval="banner.style.interval * 1000" 
			:duration="1000"
			:indicator-active-color="banner.style.btnColor">
			<swiper-item v-for="(item,index) in banner.data" :key="index">
				<img class="img" :src="item.imgUrl" alt="">
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import { mapState } from 'vuex';
	export default {
		name:"my-banner",
		data() {
			return {
				
			};
		},
		computed:{
			...mapState('home',['banner'])
		}
	}
</script>

<style lang="scss" scoped>
	.swiper{
		height: 440rpx !important;
		width: 750rpx;
		.swiper-item{
			width: 100%;
			// height: 100%;
			.img{
				width: 100%;
			}
		}
	}
</style>